<!-- 组合式 -->
<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		watch
	} from 'vue';

	import {
		ElMessage
	} from 'element-plus'

	import router from "@/router";
	import api from '@/api/api';
	import util from '@/utils/util';

	// 参数接收
	const props = defineProps({
		msg: {
			type: String,
			default: 'msg',
		},
	})
	const modelType = defineModel('type');

	// 参数
	const pages = reactive({
		formData: {
			username: 'admin',
			password: 'admin123',
		},
		checked: false,

		rules: {
			username: [{
				required: true,
				message: '请输入账号',
				trigger: 'blur'
			}],
			password: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			}],
		},
	})
	const formRef = ref();

	// onMounted(() => {})

	// 登录
	function changeLogin() {

		// 拦截验证
		formRef.value.validate(async valid => {
			if (!valid) return;
			emit('login', pages.formData)
		})
	}

	// 暴露
	defineExpose({})

	// 回调
	const emit = defineEmits(['change', 'login', 'register'])
</script>


<template>
	<div class="HomeView-form">

		<div style="width: 100%;">
			<p class="title">登录</p>
			<p class="biao"></p>
		</div>

		<!--  -->
		<el-form ref="formRef" :model="pages.formData" :rules="pages.rules" style="width: 100%;margin-top: 30px;"
			label-position="top">

			<!-- 账号： -->
			<el-form-item label="账号：" prop="username">
				<el-input type="text" maxlength="11" v-model="pages.formData.username" placeholder="请输入账号" clearable
					size="large" :style="{width: '100%'}" />
			</el-form-item>

			<!-- 密码： -->
			<el-form-item label="密码：" prop="password">
				<el-input show-password type="text" v-model="pages.formData.password" placeholder="请输入密码" clearable size="large"
					:style="{width: '100%'}" />
			</el-form-item>
		</el-form>

		<!-- 登录/注册 -->
		<l-button value="登录" @change="changeLogin" />
		 <!-- / 注册 -->
		<el-link style="margin-top: 10px;" @click="modelType = 2">注册</el-link>

	</div>
</template>


<style lang="scss">
	.HomeView-form {

		.el-form-item__label {
			font-size: 14px;
			color: #999999;
		}
	}
</style>
<style lang="scss" scoped>
	.HomeView-form {
		margin-left: 126px;
		margin-right: 75px;
		padding: 90px 70px 55px 70px;
		background: #FFFFFF;
		border-radius: 5px;

		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			font-weight: bold;
			font-size: 28px;
			color: #333333;
		}

		.biao {
			margin-top: 10px;
			width: 60px;
			height: 4px;
			background: #5775EF;
			border-radius: 6px 6px 6px 6px;
		}

		.l-button {
			margin-top: 10px;
			width: 100%;
		}

		.xieyi {
			margin-top: 10px;
			font-size: 16px;
			color: #333333;

			text {
				color: #5775EF;
				cursor: pointer;
			}
		}
	}
</style>